<template>
  <div class="login-wrap">
    <div class="login-root">
      <div class="login-main">
        <img
          class="login-one-ball"
          src="https://assets.codehub.cn/micro-frontend/login/fca1d5960ccf0dfc8e32719d8a1d80d2.png"
        />
        <img
          class="login-two-ball"
          src="https://assets.codehub.cn/micro-frontend/login/4bcf705dad662b33a4fc24aaa67f6234.png"
        />
        <div class="login-container">
          <lay-line>华盛检测技术有限公司（内用）试验检测系统</lay-line>

          <lay-form-item :label-width="0">
            <lay-input
              placeholder="用户名"
              v-model="loginForm.user"
            ></lay-input>
          </lay-form-item>
          <lay-form-item :label-width="0">
            <lay-input
              placeholder="密码"
              password
              type="password"
              v-model="loginForm.psw"
            ></lay-input>
          </lay-form-item>
          <!-- <lay-form-item :label-width="0">
            <lay-checkbox
              name="like"
              v-model="remember"
              skin="primary"
              label="1"
            >记住密码</lay-checkbox>
          </lay-form-item> -->
          <lay-form-item :label-width="0">
            <lay-button
              type="primary"
              fluid="true"
              @click="loginSubmit"
            >登录</lay-button>
          </lay-form-item>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { login } from "../../api/module/user";
import { defineComponent, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "../../store/user";
import { layer } from "@layui/layer-vue";
import { Post } from "../../api/request";
// import Cookie from "js-cookie";

export default defineComponent({
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    const method = ref("1");
    const remember = ref(false);
    const loginForm = reactive({ user: "", psw: "" });

    const loginSubmit = async () => {
      Post("userLogin", loginForm).then((res: any) => {
        if (res.code == 200) {
          // Cookie.set("token", res.data.token);
          // Cookie.get("token");
          let httpUrl: any = [];
          if (res.data.apiUrls.length) {
            res.data.apiUrls.forEach((items: any) => {
              httpUrl.push(items.url);
            });
          }
          sessionStorage.setItem("httpUrl", JSON.stringify(httpUrl));
          sessionStorage.setItem("userInfo", JSON.stringify(res.data));
          router.push("/home");
          layer.msg("登录成功", { icon: 1, time: 1000 });
          getMenuList();
        } else {
          layer.msg("登录失败", { icon: 2, time: 1000 });
        }
      });
    };

    let myList: any = ref([]);
    const getMenuList = () => {
      let userInfo: any = sessionStorage.getItem("userInfo");
      userInfo = JSON.parse(userInfo);
      let arr: any = [];
      if (userInfo.apiUrls && userInfo.apiUrls.length) {
        userInfo.apiUrls.forEach((item: any) => {
          arr.push(item);
        });
      }

      if (userInfo.pageUrls && userInfo.pageUrls.length) {
        userInfo.pageUrls.forEach((item: any) => {
          arr.push(item);
        });
      }

      myList = getMecusTabl(arr.reverse());

      let arrs: any = [];
      myList.map((rows: any) => {
        rows.id = rows.url;
        rows.icon = rows.remark;
        rows.title = rows.name;
        rows.children.map((rowss: any) => {
          rowss.id = rowss.url;
          rowss.icon = rowss.remark;
          rowss.title = rowss.name;
        });
      });

      sessionStorage.setItem("menuList", JSON.stringify(myList));
    };

    const getMecusTabl = (list: any) => {
      let arrMenus: any = [];
      let url1: any = [
        "/Checkmsg/CheckPointUpload",
        "/Checkmsg/ObjectStatusCountSta",
        "/Checkmsg/GetUnclaims",
        "/Checkmsg/DelUnclaims",
        "/Checkmsg/DoClaim",
        "/Checkmsg/GetSubmitting",
        "/Checkmsg/DoCheckPending",
        "/Checkmsg/GetCheckPending",
        "/Checkmsg/DoExamine",
        "/Checkmsg/GetExamine",
        "/Checkmsg/DoSignissue",
        "/Checkmsg/GetSignissue",
        "/Checkmsg/DoFile",
        "/Checkmsg/GetFiledlist",
      ];

      let url2: any = [
        // "/Checkmsg/CheckPointUpload",
        // "/Checkmsg/ObjectStatusCountSta",
        // "/Checkmsg/GetUnclaims",
        // "/Checkmsg/DelUnclaims",
        // "/Checkmsg/DoClaim",
        // "/Checkmsg/GetSubmitting",
        // "/Checkmsg/DoCheckPending",
        // "/Checkmsg/GetCheckPending",
        // "/Checkmsg/DoExamine",
        // "/Checkmsg/GetExamine",
        // "/Checkmsg/DoSignissue",
        // "/Checkmsg/GetSignissue",
        // "/Checkmsg/DoFile",
        // "/Checkmsg/GetFiledlist",
        "/Checkmsg/GetPersonSta",
        "/Checkmsg/GetPersonStaReport",
        "/Setting/GetTestItemInfo",
      ];

      let url3: any = [
        "/Checkmsg/GetPersonSta",
        "/Checkmsg/GetProjectSta",
        "/Checkmsg/GetProjectStaReport",
      ];

      let url4: any = [
        "/Setting/GetUsers",
        "/Setting/InsertorUpdateUser",
        "/Setting/DeleteUser",
        "/Setting/GetDepartmentInfo",
        "/Setting/AddorUpdateDepartmentInfo",
        "/Setting/DelDepartmentInfo",
      ];

      let url5: any = [
        "/Setting/GetRoleInfos",
        "/Setting/AddorUpdateRoleInfo",
        "/Setting/DeleteRoleInfo",
        "/Checkmsg/SystemChange",
      ];

      let url6: any = [
        "/Setting/DevicelistUpload",
        "/Setting/GetDeviceInfos",
        "/Setting/InsertorUpdateDevice",
        "/Setting/DeleteDevice",
      ];

      let url7: any = [
        "/Setting/RoleAssignment",
        "/Checkmsg/DetectionObjectSearch",
        "/Checkmsg/GetCheckProcess",
      ];

      let url8: any = [
        "/Setting/GetTestItemInfo",
        "/Setting/AddorUpdateTestItemInfo",
        "/Setting/DelTestItemInfo",
      ];

      let btnList1: any = [];
      let btnList2: any = [];
      let btnList3: any = [];
      let btnList7: any = [];

      let btnList4: any = [];
      let btnList5: any = [];
      let btnList6: any = [];
      let btnList8: any = [];

      let model1: any = {};
      let model2: any = {};
      let model3: any = {};
      let model7: any = {};

      let model4: any = {};
      let model5: any = {};
      let model6: any = {};
      let model8: any = {};

      list.forEach((item: any) => {
        if (
          url4.includes(item.url) ||
          url5.includes(item.url) ||
          url6.includes(item.url) ||
          url8.includes(item.url) ||
          item.url == "/system/cssx" ||
          item.url == "/system/user" ||
          item.url == "/system/role" ||
          item.url == "/system/equipment" ||
          item.url == "/system"
        ) {
          if (url4.includes(item.url)) {
            btnList4.push(item);
          }

          if (item.url == "/system/user") {
            item.btnList = [];
            item.btnList = btnList4;

            model4 = {
              ...item,
            };
          }

          if (url5.includes(item.url)) {
            btnList5.push(item);
          }

          if (item.url == "/system/role") {
            item.btnList = [];
            item.btnList = btnList5;
            model5 = {
              ...item,
            };
          }

          if (url6.includes(item.url)) {
            btnList6.push(item);
          }

          if (url8.includes(item.url)) {
            btnList8.push(item);
          }

          if (item.url == "/system/equipment") {
            item.btnList = [];
            item.btnList = btnList6;
            model6 = {
              ...item,
            };
          }

          if (item.url == "/system/cssx") {
            item.btnList = [];
            item.btnList = btnList8;
            model8 = {
              ...item,
            };
          }

          if (item.url == "/system") {
            item.children = [];
            if (JSON.stringify(model4) != "{}") {
              item.children.push(model4);
            }

            if (JSON.stringify(model5) != "{}") {
              item.children.push(model5);
            }
            if (JSON.stringify(model6) != "{}") {
              item.children.push(model6);
            }

            if (JSON.stringify(model8) != "{}") {
              item.children.push(model8);
            }

            arrMenus.push(item);
          }
        }

        if (
          url1.includes(item.url) ||
          url2.includes(item.url) ||
          url3.includes(item.url) ||
          url7.includes(item.url) ||
          item.url == "/workspace/zhcx" ||
          item.url == "/workspace/workbench" ||
          item.url == "/workspace/console" ||
          item.url == "/workspace/analysis" ||
          item.url == "/workspace"
        ) {
          if (url1.includes(item.url)) {
            btnList1.push(item);
          }

          if (item.url == "/workspace/workbench") {
            item.btnList = [];
            item.btnList = btnList1;
            model1 = {
              ...item,
            };
          }

          if (url2.includes(item.url)) {
            btnList2.push(item);
          }

          if (url7.includes(item.url)) {
            btnList7.push(item);
          }

          if (item.url == "/workspace/console") {
            item.btnList = [];
            item.btnList = btnList2;
            model2 = {
              ...item,
            };
          }

          if (url3.includes(item.url)) {
            btnList3.push(item);
          }

          if (item.url == "/workspace/analysis") {
            item.btnList = [];
            item.btnList = btnList3;
            model3 = {
              ...item,
            };
          }

          if (item.url == "/workspace/zhcx") {
            item.btnList = [];
            item.btnList = btnList7;
            model7 = {
              ...item,
            };
          }

          if (item.url == "/workspace") {
            item.children = [];
            if (JSON.stringify(model1) != "{}") {
              item.children.push(model1);
            }

            if (JSON.stringify(model2) != "{}") {
              item.children.push(model2);
            }

            if (JSON.stringify(model3) != "{}") {
              item.children.push(model3);
            }

            if (JSON.stringify(model7) != "{}") {
              item.children.push(model7);
            }
            // item.children.push(model1);
            // item.children.push(model2);
            // item.children.push(model3);
            arrMenus.push(item);
          }
        }
      });
      console.log("arrMenus", arrMenus);

      return arrMenus.reverse();
    };

    return {
      loginSubmit,
      loginForm,
      remember,
      method,
    };
  },
});
</script>

<style scoped>
.login-one-ball {
  opacity: 0.4;
  position: absolute;
  max-width: 568px;
  left: -400px;
  bottom: 0px;
}

.login-two-ball {
  opacity: 0.4;
  position: absolute;
  max-width: 320px;
  right: -200px;
  top: -60px;
}

.login-wrap {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  z-index: 9;
  background-image: url(https://assets.codehub.cn/micro-frontend/login/f7eeecbeccefe963298c23b54741d473.png);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}

.login-wrap :deep(.layui-input-block) {
  margin-left: 0 !important;
}

.login-root {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  width: 100%;
  min-width: 320px;
  background-color: initial;
}

.login-main {
  position: relative;
  display: block;
}

.logo-container {
  max-width: calc(100vw - 28px);
  margin-bottom: 40px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-container .logo {
  display: inline-block;
  height: 30px;
  width: 143px;
  background: url() no-repeat 50%;
  background-size: contain;
  cursor: pointer;
}

.login-container {
  padding: 30px;
  position: relative;
  overflow: hidden;
  width: 400px;
  max-width: calc(100vw - 28px);
  border: 1.5px solid #fff;
  border-radius: 8px;
  background: hsla(0, 0%, 100%, 0.5);
  backdrop-filter: blur(30px);
}

.login-container .layui-tab-head {
  background: transparent;
}

.login-container .layui-input-wrapper {
  margin-top: 10px;
  margin-bottom: 10px;
}

.login-container .layui-input-wrapper {
  margin-top: 12px;
  margin-bottom: 12px;
}

.login-container .assist {
  margin-top: 5px;
  margin-bottom: 5px;
  letter-spacing: 2px;
}

.login-container .layui-btn {
  margin: 10px 0px 10px 0px;
  letter-spacing: 2px;
  height: 40px;
}

.login-container .layui-line-horizontal {
  letter-spacing: 2px;
  margin-bottom: 34px;
  margin-top: 24px;
}

.other-ways {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 400;
}

.other-ways li {
  width: 100%;
}

.line-container {
  justify-content: center;
  align-items: center;
  text-align: center;
  cursor: pointer;
}

.line-container .icon {
  height: 28px;
  width: 28px;
  margin-right: 0;
  vertical-align: middle;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px 0 rgb(9 30 66 / 4%), 0 1px 4px 0 rgb(9 30 66 / 10%),
    0 0 1px 0 rgb(9 30 66 / 10%);
}

.line-container .text {
  display: block;
  margin: 12px 0 0;
  font-size: 12px;
  color: #8592a6;
}

:deep(.layui-tab-title .layui-this) {
  background-color: transparent;
}
</style>
